<section class="container">
  <div class="row">
    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :api_keys %>
    <div class="col-md-10">
      <div class="card">
        <div class="card-body">
          <h1 class="card-title list-title-description header-account"><%= gettext "API keys" %> </h1>
          <br>
          <%= if Enum.count(@api_keys) < Key.get_max_api_keys_count() do %>
            <div style="min-width: 100%;">
              <div class="tile tile-muted text-center" data-selector="empty-coin-balances-list">
                <%= gettext "Create an API key to use with your RPC и EthRPC API requests." %> <a href="https://docs.blockscout.com/for-users/api"> <%= gettext "Learn more" %></a>
              </div>
            </div>
          <% else %>
            <div style="min-width: 100%;">
              <div class="tile tile-muted text-center" data-selector="empty-coin-balances-list">
                <%= gettext "You can create 3 API keys per account." %> <a href="https://docs.blockscout.com/for-users/api"> <%= gettext "Learn more" %></a>
              </div>
            </div>
          <% end %>
          <div class="col-sm">
            <div class="mb-3 row o-flow-x">
              <%= if @api_keys != [] do %>
                <table class="table mb-3 table-watchlist">
                  <thead style="font-size: 14px; color: #6c757d" >
                    <tr>
                      <th scope="col"><%= gettext "Name" %></th>
                      <th scope="col"><%= gettext "API key" %></th>
                      <th scope="col"></th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody style="font-size: 15px; color: #6c757d" >
                    <%= Enum.map(@api_keys, fn key ->
                      render("row.html", api_key: key, conn: @conn)
                      end) %>
                  </tbody>
                </table>
              <% end %>
            </div>
          </div>
          <%= if Enum.count(@api_keys) < Key.get_max_api_keys_count() do %>
            <a class="add-api-key-button button button-primary button-sm" href="<%= api_key_path(@conn, :new) %>"><%= gettext "Add API key" %></a>
          <% end %>
        </div>
      </div>
    </div>
  </div>
  <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/delete-item-handler.js") %>"></script>
</section>
